<template>
  <div class="activity-add">
    <el-tabs class="activity-tabs-add">
      <el-tab-pane label="基础信息">
        <el-col :span="12">
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="俱乐部">
              <el-select v-model="form.activity.club_id" placeholder="请选择">
                <template v-for="items in club">
                  <el-option
                    :label="items.name"
                    :key="items.uid"
                    :value="items.uid">
                  </el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="缩略图">
              <template v-for="(image,idx) in form.activity.slider">
                <div class="images">
                  <img :src="imageUrl + image">
                  <el-tooltip class="item" effect="dark" content="删除" placement="top-end">
                    <div class="v-font delete" @click="removeImage(idx)">&#xe629;</div>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="设置为封面" placement="top-end">
                    <div class="v-font set-thumb" @click="form.activity.thumb = image">&#xe616;</div>
                  </el-tooltip>
                  <div class="cover" v-if="image === form.activity.thumb">封面</div>
                </div>
              </template>
              <div class="thumb" @click="showUpload = true">
                <img :src="img">
              </div>
            </el-form-item>
            <el-form-item label="活动标题">
              <el-input v-model="form.activity.title"></el-input>
            </el-form-item>
            <el-form-item label="目的地">
              <el-input v-model="form.activity.destination"></el-input>
            </el-form-item>
            <el-form-item label="难度系数">
              <el-rate
                style="margin-top: .5rem"
                :max="5"
                :show-text="true"
                :texts="['容易','一般','较难','困难','高强度']"
                v-model="form.activity.difficulty"
                :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
              </el-rate>
            </el-form-item>
            <el-form-item label="活动简介">
              <el-input type="textarea" v-model="form.activity.descriptions"></el-input>
            </el-form-item>
            <el-form-item label="路线类型">
              <el-select v-model="form.activity.way_type" placeholder="请选择活动路线">
                <el-option label="短线" :value="1"></el-option>
                <el-option label="中长线" :value="2"></el-option>
                <el-option label="长线" :value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="活动亮点">
              <el-tag
                :key="'tag_' + idx"
                v-for="(tag, idx) in form.activity.light_spot"
                closable
                :disable-transitions="false"
                @close="removeTag(idx)">
                {{tag}}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="showTagInput"
                v-model="inputTag"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              >
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-tab-pane>
      <el-tab-pane label="图文介绍">
        <ui-editor
          :editor.sync="graphicEditor"
          :init-content="initGraphic"
          :content.sync="form.activity.graphic"
          :height="700"
          upload-api="/api/club.upload.image.article"
          style="margin-bottom: 2rem"></ui-editor>
      </el-tab-pane>
      <el-tab-pane label="行程介绍">
        <ui-editor
          :editor.sync="tripIntroductionEditor"
          :init-content="initTripIntroduction"
          :content.sync="form.activity.trip_graphic"
          :height="700"
          upload-api="/api/club.upload.image.article"
          style="margin-bottom: 2rem"></ui-editor>
      </el-tab-pane>
      <el-tab-pane label="领队介绍">
        <ui-editor
          :editor.sync="leaderEditor"
          :init-content="initLeaderIntroduction"
          :content.sync="form.activity.leader_graphic"
          :height="700"
          upload-api="/api/club.upload.image.article"
          style="margin-bottom: 2rem"></ui-editor>
      </el-tab-pane>
      <el-tab-pane label="活动须知">
        <ui-editor
          :editor.sync="activityNoticeEditor"
          :init-content="initActivityNotice"
          :content.sync="form.activity.activity_notice"
          :height="700"
          upload-api="/api/club.upload.image.article"
          style="margin-bottom: 2rem"></ui-editor>
      </el-tab-pane>
    </el-tabs>
    <el-col :span="12">
      <el-form>
        <el-form-item style="margin-top: 2rem">
          <el-button type="primary" @click="submit">保存</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <ui-upload
      :limit-width="500"
      :limit-height="500"
      :limit-size="500"
      @image="image => {form.activity.slider.push(image)}"
      :show.sync="showUpload"></ui-upload>
  </div>
</template>
<script>
  import uiGroupStage from './add-group-stage'
  import uiEditor from '@components/editor'
  import config from '@config'
  import uiUpload from '@components/upload'
  export default {
    components: {
      uiUpload,
      uiEditor,
      uiGroupStage
    },
    data () {
      return {
        graphicEditor: null, // 图文介绍编辑器实例
        tripIntroductionEditor: null, // 行程介绍编辑器实例
        leaderEditor: null, // 领队介绍编辑器实例
        activityNoticeEditor: null, // 活动须知编辑器实例
        showTagInput: false, // 显示添加活动景点
        showUpload: false, // 显示弹出框
        inputTag: '', // 接收输入的活动景点值
        initGraphic: '', // 图文简介编辑器初始化值
        initTripIntroduction: '', // 行程介绍初始化值
        initLeaderIntroduction: '', // 领队介绍初始化值
        initActivityNotice: '', // 活动须知编辑器初始化值
        imageUrl: config.imageUrl, // 图片域名
        // element-ui date picker组件参数
        pickerOptions: {},
        img: require('@assets/upload.png'), // 默认显示图片
        // 活动时间
        period: [],
        province: [],
        city: [],
        county: [],
        club: [],
        form: {
          activity: {
            // 俱乐部id
            club_id: '',
            // 活动标题
            title: '',
            // 目的地
            destination: '',
            // 活动难度系数
            difficulty: 1,
            // 活动轮播图
            slider: [],
            // 活动缩略图
            thumb: '',
            // 线路类型
            way_type: 1,
            // 活动亮点
            light_spot: [],
            // 活动状态
            status: 1,
            // 图文详情
            graphic: '',
            // 领队介绍
            leader_graphic: '',
            //  行程介绍
            trip_graphic: '',
            // 活动简介
            descriptions: '',
            // 活动需知
            activity_notice: '',
            // 经度
            lng: '',
            // 纬度
            lat: ''
          }
        },
        activity_id: null
      }
    },
    /**
     *  删除景点
     */
    methods: {
      removeTag (idx) {
        this.form.activity.light_spot = this.form.activity.light_spot.filter((_, _idx) => {
          return (idx !== _idx)
        })
      },
      showInput () {
        this.showTagInput = true
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus()
        })
      },
      handleInputConfirm () {
        let inputTag = this.inputTag
        if (inputTag) {
          this.form.activity.light_spot.push(inputTag)
        }
        this.showTagInput = false
        this.inputTag = ''
      },
      /**
       *  移出已上传的图片
       */
      removeImage (idx) {
        this.$confirm('确定要删除吗?删除之后不可恢复!', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.form.activity.slider = this.form.activity.slider.filter((_, index) => {
            return idx !== index
          })
        })
      },
      /**
       *  获取列表
       */
      getItems (id) {
        this.loading = true
        this
          .$api
          .activity
          .showInfo(id).then(r => {
            console.log(r)
            this.loading = false
            this.form = r
            /**
             *  @purpose 图文简介
             */
            this.graphicEditor.txt.html(r.activity.graphic)
            /**
             *  @purpose 领队介绍
             */
            this.leaderEditor.txt.html(r.activity.leader_graphic)
            /**
             *  @purpose 行程介绍
             */
            this.tripIntroductionEditor.txt.html(r.activity.trip_graphic)
            /**
             *  @purpose 活动须知
             */
            this.activityNoticeEditor.txt.html(r.activity.activity_notice)
            /**
             *  @purpose 活动亮点
             //  */
            this.form.light_spot = r.activity.light_spot

            /**
             *  @purpose 活动轮播图
             */
            // this.form.slider = data.slider
          })
          .catch(err => {
            console.log(err)
            this.loading = false
          })
      },
      /**
       * 获取俱乐部名称
       */
      getList () {
        this
          .$api
          .activity
          .clubList()
          .then(r => {
            this.club = r
          })
      },
      /**
       * @purpose 修改提交数据
       */
      submit () {
        console.log(this.form)
        if (this.form.activity.slider.length === 0) {
          this.toast('请至少上传一张轮播图', 'warning')
          return false
        }
        if (!this.form.activity.thumb) {
          this.toast('请设置缩略图', 'warning')
          return false
        }
        if (!this.form.activity.title) {
          this.toast('请填写活动标题', 'warning')
          return false
        }
        if (!this.form.activity.destination) {
          this.toast('请填写目的地', 'warning')
          return false
        }
        if (this.form.activity.light_spot.length === 0) {
          this.toast('请至少填写一个活动亮点', 'warning')
          return false
        }
        if (!this.form.activity.graphic) {
          this.toast('请填写图文介绍', 'warning')
          return false
        }
        if (!this.form.activity.trip_graphic) {
          this.toast('请填写行程介绍', 'warning')
          return false
        }
        if (!this.form.activity.leader_graphic) {
          this.toast('请填写领队介绍', 'warning')
          return false
        }
        if (!this.form.activity.activity_notice) {
          this.toast('请填写活动须知', 'warning')
          return false
        }
        this.form.activity.id = this.activity_id
        this.showLoading()
        this
          .$api
          .activity
          .editActivityInfo(this.form.activity)
          .then(r => {
            console.log(r)
            this.toast('修改成功')
            this.jump(-1)
          })
      }
    },
    created () {
      this.getList()
      this.activity_id = this.$route.params.activity_id
      this.getItems({activity_id: this.activity_id})
      this.pickerOptions = Object.assign({}, this.pickerOptions, {
        disabledDate: (time) => {
          return (time.getTime() + 3600 * 24) < this.getDayStartTimeStamp()
        }
      })
    }
  }
</script>
<style lang="sass">
  .el-tabs__content
    width: 100%
    min-height: 600px
</style>
<style scoped lang="sass">
  .activity-tabs-add
    min-height: 100% !important
    .el-tag
      margin-right: 10px
      .button-new-tag
        margin-left: 10px
        height: 32px
        line-height: 30px
        padding-top: 0
        padding-bottom: 0
    .input-new-tag
      width: 90px
      margin-left: 10px
      vertical-align: bottom
    .activity-add
      width: 100%
      height: 100%
    .thumb,.images
      width: 150px
      height: 150px
      background-color: #ebebeb
      cursor: pointer
      border-radius: 5px
      float: left
      margin: 10px 10px 0 0
      &:hover
        background-color: #f4f4f4
      > img
        width: 100%
        height: 100%
        border-radius: 5px
    .images
      cursor: auto
      position: relative
      .delete,.set-thumb,.cover
        width: 50%
        height: 2rem
        background-color: #ff5700
        align-items: center
        justify-content: center
        position: absolute
        color: #ffffff
        display: none
        cursor: pointer
      &:hover
        .delete,.set-thumb
          display: flex
      .delete
        top: 0
        left: 0
        border-top-left-radius: 5px
      .set-thumb
        top: 0
        right: 0
        border-top-right-radius: 5px
        background-color: #09bb07
      .cover
        width: 100%
        display: flex
        bottom: 0
        right: 0
        border-bottom-right-radius: 5px
        border-bottom-left-radius: 5px
        background-color: rgba(255,87,0, .5)
        font-size: .8rem
        cursor: default
      .activity-tabs-add
        height: 100%
</style>
